<template>
  <view>
    <!-- 新闻标题 -->
    <view class="title">{{ title }}</view>

    <!-- 新闻内容 -->
    <view class="newContent">
      <rich-text class="richText" :nodes="strings"></rich-text>
    </view>

    <!-- 评论区 -->
    <view class="comments-section">
      <text class="comments-title">评论区</text>

      <!-- 评论列表 -->
      <view class="comment-item" v-for="(comment, index) in comments" :key="index">
        <text class="comment-author">{{ comment.author }}:</text>
        <text class="comment-content">{{ comment.content }}</text>
      </view>

      <!-- 输入评论 -->
      <view class="comment-input-section">
        <input class="comment-input" v-model="newComment" placeholder="输入您的评论..." />
        <button class="comment-submit-btn" @click="submitComment">提交评论</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '',        // 新闻标题
      strings: '',      // 新闻内容
      comments: [],     // 评论列表
      newComment: ''    // 用户输入的新评论
    };
  },
  onLoad(e) {
    // 获取新闻内容
    uni.request({
      url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + e.newid,
      method: 'GET',
      data: {},
      success: res => {
        this.title = res.data.title;
        this.strings = res.data.content;
      },
    });

    // 示例：初始化一些评论
    this.comments = [
      { author: 'Alice', content: '这篇文章非常有用！' },
      { author: 'Bob', content: '谢谢分享！' }
    ];
  },
  methods: {
    submitComment() {
      if (this.newComment.trim() === '') {
        uni.showToast({
          title: '评论不能为空',
          icon: 'none'
        });
        return;
      }

      // 添加评论到评论列表
      this.comments.push({
        author: '匿名用户',  // 默认作者名
        content: this.newComment
      });

      // 清空输入框
      this.newComment = '';

      // 提示提交成功
      uni.showToast({
        title: '评论已提交',
        icon: 'success'
      });
    }
  }
}
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #ded9ff;
}
.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.newContent {
  width: 100%;
  max-width: 600px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.richText {
  line-height: 2.0em;
  font-size: 16px;
  color: #555;
  word-wrap: break-word;
  word-break: break-all;
}
.richText img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.comments-section {
  width: 100%;
  max-width: 600px;
  margin-top: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.comments-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.comment-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.comment-author {
  font-weight: bold;
  color: #555;
}
.comment-content {
  color: #666;
}
.comment-input-section {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.comment-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 10px;
}
.comment-submit-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.comment-submit-btn:hover {
  background-color: #0056b3;
}
</style>